<template>
	<el-date-picker
		v-model="date"
		size="mini"
		type="datetimerange"
		range-separator="至"
		start-placeholder="开始日期"
		end-placeholder="结束日期"
		value-format="yyyy-MM-dd HH:mm:ss"
		:picker-options="pickerOptions"
		:default-time="['00:00:00', '23:59:59']"
		@change="datePickerChange"
	></el-date-picker>
</template>

<script>
import moment from 'moment';

let filterType = '';
export default {
	data() {
		return {
			date: [],
			pickerOptions: {
				shortcuts: [
					{
						text: '今天',
						onClick(picker) {
							let start = moment()
								.hour(0)
								.minute(0)
								.second(0)
								.format('YYYY-MM-DD HH:mm:ss');

							let end = moment().format('YYYY-MM-DD HH:mm:ss');
							filterType = 0;
							picker.$emit('pick', [start, end]);
							// this.$emit()
						}
					},
					{
						text: '昨天',
						onClick(picker) {
							let d = moment().subtract(1, 'day');

							let start = d
								.hour(0)
								.minute(0)
								.second(0)
								.format('YYYY-MM-DD HH:mm:ss');
							let end = d
								.hour(23)
								.minute(59)
								.second(59)
								.format('YYYY-MM-DD HH:mm:ss');
							filterType = 1;
							picker.$emit('pick', [start, end]);
						}
					},
					{
						text: '近七天',
						onClick(picker) {
							let start = moment()
								.subtract(6, 'day')
								.hour(0)
								.minute(0)
								.second(0)
								.format('YYYY-MM-DD HH:mm:ss');

							let end = moment()
								.hour(23)
								.minute(59)
								.second(59)
								.format('YYYY-MM-DD HH:mm:ss');
							filterType = 2;
							picker.$emit('pick', [start, end]);
						}
					},
					{
						text: '近30天',
						onClick(picker) {
							let start = moment()
								.subtract(29, 'day')
								.hour(0)
								.minute(0)
								.second(0)
								.format('YYYY-MM-DD HH:mm:ss');

							let end = moment()
								.hour(23)
								.minute(59)
								.second(59)
								.format('YYYY-MM-DD HH:mm:ss');
							filterType = 3;
							picker.$emit('pick', [start, end]);
						}
					},
					{
						text: '本月',
						onClick(picker) {
							let start = moment().format('YYYY-MM-01 00:00:00');

							let end = moment()
								.hour(23)
								.minute(59)
								.second(59)
								.format('YYYY-MM-DD HH:mm:ss');
							picker.$emit('pick', [start, end]);
						}
					}
				]
			}
		};
	},
	props: {
		datas: [Array]
	},
	watch: {
		datas(val) {
			this.date = val;
		}
	},
	mounted() {
		let timerDate = this.datas ? this.datas[0] : false;
		if (timerDate) {
			this.date = this.datas;
		} else {
			let start = moment()
				.hour(0)
				.minute(0)
				.second(0)
				.format('YYYY-MM-DD 00:00:00');

			let end = moment().format('YYYY-MM-DD HH:mm:ss');
			this.date = [start, end];
		}
	},
	methods: {
		datePickerChange(val) {
			if (val) {
				let [start, end] = val;

				if (start == end) {
					start = moment(start)
						.hour(0)
						.minute(0)
						.second(0)
						.format('YYYY-MM-DD HH:mm:ss');

					end = moment(end)
						.hour(23)
						.minute(59)
						.second(59)
						.format('YYYY-MM-DD HH:mm:ss');
				}
				this.$emit('change', [start, end, filterType]);
			} else {
				this.$emit('refresh');
			}
		}
	}
};
</script>
<style lang="stylus" scoped></style>
